<template>
  <li @mousemove="isShow = id" @mouseleave="isShow='-1'">
    <label>
      <input @change="alterDone(id)" type="checkbox" :checked="done" />
      <span>{{ thing }}</span>
    </label>
    <button @click="deleteItem(id)" class="btn btn-danger" :style="isShow===id?'display:block':'display: none'">删除</button>
  </li>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Item",
});
</script>

<script setup lang="ts">
// 接受props传值
import {ref} from "vue";

defineProps<{
  id: string;
  thing: string;
  done: boolean;
  alterDone:(id:string)=>void;
  deleteItem:(id:string)=>void;
}>();

// 删除按钮显示和隐藏
const isShow = ref('-1')
</script>

<style scoped>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>
